<template>
  <div class="explain-ct">
    <ul class="tab-box">
        <li v-for="tab in tabs" :class="{'main-color-border': tabName === tab.en}"
        @touchEnd="clickTab(tab.en)">
          <span>{{tab.cn}}</span>
        </li>
    </ul>
  </div>
  <div class="bg-bottom">
    <div v-show="tabName === 'info'">
      <div class="noPay" v-if="products.length <= 0">没有待付款</div>
      <div class="indent" v-for="product in products">
          <div class="" v-link="'buy-indent-particular?orderId=' + product.id + '&num='+ product.outTradeNo">
            <div class="title">
              <div class="title-lf">订单号：{{ product.outTradeNo }}</div>
              <div class="title-rt">{{ product.date }}</div>
            </div>
            <h4>{{ product.goodsName }}{{ product.id }}</h4>
          </div>
          <div class="money">
            <div class="money-lf">实付：{{ product.payFee/100 | currency "" }}</div>
            <div class="money-rt">
              <span @click="deleteList($index)" class="margin-rt">取消订单</span>
              <span @click="payment($index)">立即付款</span>
            </div>
          </div>
      </div>
    </div>

    <div v-show="tabName === 'dynamic'">
      <div class="noPay" v-if="productsPaid.length <= 0">没有记录</div>
      <div class="indent" v-for="paid in productsPaid"
      v-link="'buy-indent-particular?orderId=' + paid.id + '&num='+ paid.outTradeNo">
        <div class="title">
          <div class="title-lf">订单号：{{ paid.outTradeNo }}</div>
          <div class="title-rt red">{{ paid.orderStatus }}</div>
        </div>
        <p>{{ paid.date }}</p>
        <h4>{{ paid.goodsName}}</h4>
        <div class="money">
          <div class="money-lf">实付：{{ paid.payFee/100 | currency "" }}</div>
          <div class="money-rt">{{ paid.expressNo2 }}</div>
        </div>
      </div>
    </div>
  </div>
  <div v-show="loadingBottom" class="loading-bottom">没有更多数据</div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        loadingBottom: false,
        dateType: "",
        pageNum: 1,
        pageSum: 0,
        payStatus: "00",
        payStatusPaid: "10",
        tabName: '',
        products: [],
        productsPaid: [],
        curId: "",
        tabs: [{
          en: 'info',
          cn: '待付款'
        }, {
          en: 'dynamic',
          cn: '进行中'
        }]
      };
    },
    methods: {
      clickTab(name) {
        this.tabName = name;
      },
      underway() {
        alert("1");
      },
      async deleteList(v) {
        let isDelete = confirm("确认要取消订单吗？");
        if (isDelete) {
          this.curId = this.products[v].id;
          await AJAX.delOrders(this.curId);
          location.reload();
        }
      },
      async payment(v) {
        let num = this.products[v].id;
        let immediatelyPay = await AJAX.immediatelyPay({
          openid: "openid=" + this.$root.openId,
          orderId: "orderId=" + num
        });
        window.location.href = "https://pay.swiftpass.cn/pay/jspay?token_id="
        + immediatelyPay.resInfo + "&showwxpaytitle=1";
        console.log(immediatelyPay);
      },
      async scroll() {
        if (document.documentElement.scrollHeight - document.body.scrollTop <= document.documentElement.clientHeight) {
          this.loading = true;
          this.pageNum ++;
          this.nextPage(this.tabName);
        }
      },
      async nextPage (tabName) {
        console.info(tabName);
        let payStatus = '00';
        if (tabName === 'dynamic') {
          payStatus = '10';
        }
        let getOrders = await AJAX.getOrders({
          dateType: "dateType=" + this.dateType,
          openId: "openId=" + this.$root.openId,
          pageNum: "pageNum=" + this.pageNum,
          payStatus: "payStatus=" + payStatus
        });
        this.pageSum = getOrders.pageSum;
        if (tabName !== 'dynamic') {
          getOrders.recordList.forEach((pro, key) => {
            let date = new Date(pro.createTime);
            getOrders.recordList[key].date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          });
          this.products = this.products.concat(getOrders.recordList);
        } else {
          getOrders.recordList.forEach((pro, key) => {
            if (pro.orderStatus === "1") {
              getOrders.recordList[key].orderStatus = "已确认";
            } else if (pro.orderStatus === "2") {
              getOrders.recordList[key].orderStatus = "备货中";
            } else if (pro.orderStatus === "3") {
              getOrders.recordList[key].orderStatus = "已发货";
            } else if (pro.orderStatus === "4") {
              getOrders.recordList[key].orderStatus = "已完成";
            } else if (pro.orderStatus === "5") {
              getOrders.recordList[key].orderStatus = "已关闭";
            }
            let date = new Date(pro.createTime);
            getOrders.recordList[key].date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          });
          this.productsPaid = this.productsPaid.concat(getOrders.recordList);
        }
        this.loading = false;
        if (this.pageNum > this.pageSum) {
          this.loadingBottom = true;
          setTimeout(() => {
            this.loadingBottom = false;
          }, 2000);
        }
      }
    },
    async ready() {
      this.tabName = "info";
      let getOrders = await AJAX.getOrders({
        dateType: "dateType=" + this.dateType,
        openId: "openId=" + this.$root.openId,
        pageNum: "pageNum=" + this.pageNum,
        payStatus: "payStatus=" + this.payStatus
      });
      getOrders.recordList.forEach((pro, key) => {
        let date = new Date(pro.createTime);
        getOrders.recordList[key].date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      });
      this.products = getOrders.recordList;
      let getOrdersPaid = await AJAX.getOrders({
        dateType: "dateType=" + this.dateType,
        openId: "openId=" + this.$root.openId,
        pageNum: "pageNum=" + this.pageNum,
        payStatus: "payStatus=" + this.payStatusPaid
      });
      getOrdersPaid.recordList.forEach((pro, key) => {
        if (pro.orderStatus === "1") {
          getOrdersPaid.recordList[key].orderStatus = "已确认";
        } else if (pro.orderStatus === "2") {
          getOrdersPaid.recordList[key].orderStatus = "备货中";
        } else if (pro.orderStatus === "3") {
          getOrdersPaid.recordList[key].orderStatus = "已发货";
        } else if (pro.orderStatus === "4") {
          getOrdersPaid.recordList[key].orderStatus = "已完成";
        } else if (pro.orderStatus === "5") {
          getOrdersPaid.recordList[key].orderStatus = "已关闭";
        }
        let date = new Date(pro.createTime);
        getOrdersPaid.recordList[key].date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      });
      this.productsPaid = getOrdersPaid.recordList;
      console.log(this.products);
      window.onscroll = () => {
        this.scroll();
      };
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .bg-bottom{
    margin-bottom: 3rem;
  }
  .indent{
    color:#A6A6A6;
    font-size: .6rem;
    margin-bottom: .5rem;
    .title{
      clear: both;
      height:1.3rem;
      padding:.3rem;
      background-color: #fff;
      .title-lf{
        position: absolute;
        left: .5rem;
      }
      .title-rt{
        position: absolute;
        right: .5rem;
      }
    }
    p{
      background-color: #fff;
      padding:0 .55rem;
      font-size: .5rem;
    }
    h4{
      background-color: #fff;
      padding:0 .5rem;
      font-size: .7rem;
      font-weight: normal;
      color:#404040;
    }
    .money{
      clear: both;
      height:2.2rem;
      padding:.5rem;
      border-top: 1px solid #e6e6e6;
      background-color: #fff;
      .money-lf{
        position: absolute;
        left: .5rem;
        color:#15A1D6;
      }
      .money-rt{
        position: absolute;
        right: .5rem;
        span{
          display: inline-block;
          border-radius: .1rem;
          border: 1px solid #15A1D6;
          padding: .1rem .55rem;
          color:#15A1D6;
        }
        .margin-rt{
          margin-right: .2rem;
        }
      }
    }
    .red{
      color: #FC5622;
    }
  }
  .tab-box {
    display: flex;
    border:1px solid #EBEBEB;
    background-color: #fff;
    margin-bottom: .5rem;
    justify-content: space-around;
    li {
      font-size: .7rem;
      text-align: center;
      width: 49.99%;
      border-bottom: 1px solid #EBEBEB;
      padding: .3rem 0;
      span {
        border-right: 1px solid #EBEBEB;
        display: block;
      }
    }
    li:first-child {
      span {
        border-left: 0px none;
      }
    }
    li.main-color-border {
      border-bottom:3px solid #15A1D6;
      color:#404040;
    }
  }
  .loading-bottom{
    position: fixed;
    border:1px solid #000;
    bottom: 30%;
    left: 35%;
    background-color: #000;
    color: #fff;
    font-size: .6rem;
    padding:1rem;
    border-radius: .3rem;
    opacity: .6;
  }
  .noPay{
    text-align: center;
    padding-top: 2rem;
    color: #404040;
    font-size: .8rem;
  }
</style>
